<template>
  <div class="my-page">
    <!-- 我的-游客未登录的页面 -->
    <div class="visitor" v-if="isShow">
      <div class="img">
      <img src="http://liufusong.top:8080/img/profile/bg.png" alt="">
    </div>
    <div class="info">
      <div class="icon">
        <img class="avatar" src="http://liufusong.top:8080/img/profile/avatar.png" alt="">
      </div>
      <div class="user">
        <div class="uname">游客</div>
        <button class="btn" @click="loginFn">去登录</button>
      </div>
    </div>
    </div>

<!-- 我的-用户登陆之后的页面 -->
    <div class="visitor" v-else>
      <div class="img">
      <img src="http://liufusong.top:8080/img/avatar.png" alt="">
    </div>
    <div class="info">
      <div class="icon">
        <img class="avatar" src="http://liufusong.top:8080/img/profile/avatar.png" alt="">
      </div>
      <div class="user">
        <div class="uname">{{userInfo.nickname}}</div>
        <button class="btn" @click="loignOut">退出</button>
        <div class="emit">编辑个人资料></div>
      </div>
    </div>
    </div>

    <van-grid column-num="3">
  <van-grid-item icon="star-o" text="我的收藏" to="/collect"/>
  <van-grid-item icon="wap-home-o" text="我的出租" to="/hire"/>
  <van-grid-item icon="underway-o" text="看房记录" />
  <van-grid-item icon="orders-o" text="成为房主" />
  <van-grid-item icon="manager-o" text="个人资料" />
  <van-grid-item icon="service-o" text="联系我们" />
</van-grid>
  <div class="pic">
    <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
  </div>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/user'
import { delToken, getToken, delCityName } from '@/utils/storage'

export default {
  name: 'my-page',
  data () {
    return {
      isShow: true,
      userInfo: {}
    }
  },
  async created () {
    const token = getToken()
    // console.log(token)
    // 获取用户信息
    const res = await getUserInfo('/user')
    this.userInfo = res.body
    if (token) {
      this.isShow = false
    } else {
      this.$toast('登录失效，请重新登录')
      this.isShow = true
    }
  },
  methods: {
    loignOut () {
      delToken()
      delCityName()
      this.isShow = true
    },
    loginFn () {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.my-page{
  position: relative;
}
.img{
  width: 375px;
  height: 191px;
}
.img img{
  width: 100%;
  height: 100%;
}
.info{
position: absolute;
width: 85%;
height: 90%;
background-color: #fff;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 0 10px 3px #ddd;
margin: -50px auto 0;
text-align: center;
font-size: 13px;
}
.icon{
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 50%;
  padding: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -10%;
  padding: 5px;
  box-shadow: 0 0 10px 3px #ddd;
}
.avatar{
  width: 95%;
  height: 95%;
}
.user{
  width: 80px;
  height: 80px;
  position: absolute;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 18%;
  padding: 0 auto 5%;
}
.user .btn{
padding: 5px 10px;
margin-top: 20px;
color: #fff;
background-color: #21b97a;
border-radius: 15%;
border: 1px solid #fff;
}
.van-grid{
  position: absolute;
  top: 160%;
  width: 100%;
}
.pic{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 80%;
  width: 345px;
  height: 85px;
}
.pic img {
  width: 100%;
}
.emit{
  margin-top: 10%;
  color: #999999;
  font-size: 12px;
}
</style>
